<template>
  <el-row class="flex-column customer-cu-page">
    <el-row class="page-header">
      <el-col :span="12" class="header-left">
        <span class="left-breadcrumb" @click="handleClickBreadcrumb">
          {{ beforeRouteName[$route.query.from] + ' ' }}
        </span>
        <span class="left-slash"> / </span>
        <span v-if="$route.query._id">编辑客户</span>
        <span v-else>新增客户</span>
      </el-col>
      <el-col :span="12" class="header-right">
        <el-button
          v-if="$route.query._id"
          size="mini"
          icon="el-icon-refresh"
          @click="init"
        >测试刷新按钮</el-button>
        <!--<el-button-->
        <!--  type="warning"-->
        <!--  size="mini"-->
        <!--  icon="el-icon-back"-->
        <!--  @click="handleClickBreadcrumb"-->
        <!--&gt;返 回</el-button>-->
      </el-col>
    </el-row>

    <el-row class="page-container">
      <FunTab :tabs="tabs" :activeName="activeName" @handle-click="handleClick">

        <template slot="customerTab">
          <el-row v-loading="pageLoading" element-loading-text="正在加载数据..." class="customer-tab-row">
            <c-u-drawer
              :sheetFieldList="retrieveItem"
              ref="CUDrawer"
            ></c-u-drawer>
          </el-row>
        </template>

        <template slot="historyTab">
          <el-row v-loading="pageLoading" element-loading-text="正在加载数据...">
            这是历史记录
          </el-row>
        </template>

      </FunTab>
    </el-row>
  </el-row>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import FunTab from '@/components/cardLayout/FunTab.vue'
import CUDrawer from '@/views/customer/components/c_u_drawer.vue'

@Component({
  name: 'CUCustomer',
  components: {
    FunTab,
    CUDrawer
  }
})
export default class CUCustomer extends Vue {
  private $route: any
  private $router: any
  private retrieveItem: [] = []
  private isCreated: boolean = false
  private pageLoading: boolean = false
  private activeName: string = 'customer'
  private tabs: object[] = [
    { label: '客户', name: 'customer', slotName: 'customerTab' },
    { label: '历史记录', name: 'history', slotName: 'historyTab' }
  ]

  private beforeRouteName: object = {
    my: '我的客户',
    all: '全部客户'
  }

  public created () {
    if (!this.isCreated) {
      console.log('c_u customer created')
      this.init()
    }
  }

  private init () {
    // console.log('c_u customer created')
    this.pageLoading = true
    const template = JSON.parse(
      window.sessionStorage.getItem('CustomerTemplateJSON') || '{}'
    ).currentFields
    console.log('template:\n', template)
    if (this.$route.query._id) { // 编辑
      setTimeout(() => { // 模拟请求延迟
        if (template.length > 0) {
          // const item = LIST_DATA.find(v => v._id === this.$route.query._id)
          const item = {
            _id: '9120eu092u1eeer21',
            name: '方鲁华',
            gender: 2,
            phone: '15683344721',
            wechat: '15629300000',
            email: 'ceshihao@7moor.com',
            companyName: '容联七陌科技有限公司',
            level: 2,
            owner: 2,
            area: ['山东省', '青岛市', '市北区'],
            address: '山东东营东城区第三街道',
            remark: '我是一条描述，不过不知道写点儿啥',
            created_time: '2020-09-22'
          }
          if (item) {
            this.retrieveItem = template.map(v => {
              if (['phone', 'wechat', 'email'].includes(v.fieldType)) {
                v.defaultValue = item[v.fieldType]
                v.defaultValue2 = '数据库还没存，随便写吧。' + v.fieldType
              } else {
                v.defaultValue = item[v.fieldType]
              }
              if (['owner'].includes(v.fieldType)) {
                v.options = [{ key: 1, value: '测试' }, { key: 2, value: '自定义' }, { key: 3, value: '选项' }]
              }
              return v
            })
            console.log('retrieveItem:\n', this.retrieveItem)
            console.log('--- has _id ---');
            (this as any).$refs.CUDrawer.initForm()
          }
        }
        this.pageLoading = false
      }, 500)
    } else { // 新增
      setTimeout(() => {
        this.retrieveItem = template
        // console.log('todo: 获取客户模板，每个数据传「空值」')
        console.log('--- not has _id ---');
        (this as any).$refs.CUDrawer.initForm()
        this.pageLoading = false
      }, 0)
    }
  }

  public mounted () {
    // console.log('c_u customer mounted')
  }

  public activated () {
    if (this.isCreated) {
      console.log('c_u customer activated')
      this.init()
    } else {
      this.isCreated = true
    }
  }

  private handleClickBreadcrumb () {
    this.$destroy()
    this.$router.push({
      path: `/index/customer/${this.$route.query.from}`
    })
  }

  private handleClick (data: any) {
    // console.log(data)
  }

  private deactivated () {
    // this.$destroy()
  }
}
</script>

<style lang="stylus" scoped>
  .customer-cu-page
    // margin-left 10px
    .page-header
      height 30px
      margin-bottom 20px
      .header-left
        font-size 18px
        font-weight 900
        .left-breadcrumb
          color #B4BAC8
          cursor pointer
        .left-slash
          color #B4BAC8
      .header-right
        text-align right
    .page-container
      flex 1
      height calc(100% - 52px)
      margin 0 2px 2px 0
      padding 10px 10px 20px 20px
      border-radius 10px
      border 1px solid $border-main
      box-shadow 0px 0px 4px 0px #E0E6F0, 0px 1px 4px 0px #E0E6F0
      .customer-tab-row
        height 100%
        margin-right 10px
      & >>> .el-tabs__content
        height calc(100vh - 232px)
        /*overflow auto*/
      & >>> #pane-customer
        height 100%
</style>
